<template>
  <div class="role-container">
    <!-- 搜索框 -->
    <div class="search-container">
      <div class="top">
        <div class="top-left">
          <el-icon>
            <Search />
          </el-icon>
          <span>筛选搜索</span>
        </div>
        <div class="top-right">
          <!-- 重置  查询搜索 按钮 -->
          <el-button type="info" @click="restKeyWord">重置</el-button>
          <el-button type="primary" @click="queryList">查询搜索</el-button>
        </div>
      </div>
      <div class="bottom">
        <div class="text">角色名称 :</div>
        <el-input v-model="searchParams.keyword" placeholder="请输入角色名称" />
      </div>
    </div>
    <!-- 数据列表 ---- 添加按钮 -->
    <div class="btn-container">
      <div class="left">
        <el-icon size="18">
          <Tickets />
        </el-icon>
        <span>数据列表</span>
      </div>
      <!-- 添加按钮 -->
      <!-- v-if 根据 权限列表来显示  如果用户没有这个权限  将不显示添加按钮 -->
      <el-button type="primary" @click="addRoleFn" v-if="userStore.getPermission.includes('addUser')">添加</el-button>
    </div>
    <!-- 表格 -->
    <div class="table-container">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column align="center" prop="id" label="编号" width="60px" />
        <el-table-column align="center" prop="name" label="角色名称" />
        <el-table-column align="center" prop="description" label="描述" />
        <el-table-column align="center" prop="adminCount" label="用户数" />
        <el-table-column align="center" label="添加时间">
          <template #default="scope">
            {{ dayjs(scope.row.createTime).format("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否启用">
          <template #default="{ row }">
            <el-switch v-model="row.status" :active-value="1" :inactive-value="0" @click="SwitchStatus(row)" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="168px">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="toAllotMenu(row.id)">分配菜单</el-button>
            <el-button link type="primary" size="small" @click="toAllotResource(row.id)">分配资源</el-button>
            <el-button link type="primary" size="small" @click="editRoleFn(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 组件 -->
    <div class="pagination-box">
      <el-pagination v-model:current-page="paginationParams.currentPage" v-model:page-size="paginationParams.pageSize"
        :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper" :total="paginationParams.total"
        :background="true" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!-- 添加/编辑 窗口 组件 -->
    <RoleEdit :dialogFormVisible="dialogFormVisible" :roleEditForm="roleEditForm" @cancel="doCancelFn"
      @confirm="doConfirmFn" />
  </div>
</template>



<script setup lang="ts">
import * as http from '@/request/http';
import { reactive, ref } from 'vue';
import { ElMessage, dayjs } from 'element-plus';
import { Search, Tickets } from '@element-plus/icons-vue';
import useTable from '@/hooks/components/useTable';
import { useUserStore } from '@/store/userStore';
import RoleEdit from './roleEdit.vue';
import router from '@/router';

const userStore = useUserStore();

// 查询参数对象   keyword关键字
const searchParams = reactive({
  keyword: '',
})

// 调用useTable函数  实现table数据渲染 以及 分页器功能
const {
  tableData,
  paginationParams,
  handleCurrentChange,
  handleSizeChange,
  queryList,
} = useTable(http.role.roleList, searchParams);

// 修改角色状态 (是否启用)
const SwitchStatus = (row: IRoleModel) => {
  console.log(row.id, row.status);
  http.role.updateStatus(row.id!, row.status).then(res => {
    if (res.code === 200) {
      ElMessage.success('更新成功');
    } else {
      ElMessage.error('更新失败');
      // 更新失败的话  需要将 状态 复原
      row.status = row.status == 1 ? 0 : 1;
    }
  }).catch(err => {
    console.log("err : ", err);
    // 更新失败的话  需要将 状态 复原
    row.status = row.status == 1 ? 0 : 1;
  })
}

// 点击 重置(清空) 搜索框
const restKeyWord = () => {
  searchParams.keyword = '';  // 重置(清空)搜索框内容
}


// 控制 roleEdit(添加/编辑 角色窗口) 的 打开/关闭
const dialogFormVisible = ref(false);

// 添加/编辑 角色窗口 所需的表单信息
const roleEditForm = reactive({
  id: 0,
  adminCount: 0,
  createTime: '',
  sort: 0,
  name: '',
  description: '',  // 描述
  status: 1,
})

// 点击 添加 角色
const addRoleFn = () => {
  roleEditForm.id = 0;  // 添加
  roleEditForm.name = ''; // 点击添加 传过去的name  应该更改为默认值 ""
  roleEditForm.description = '';  // 点击添加 传过去的description  也应该更改为默认值 ""
  roleEditForm.status = 1;  // 点击添加 传过去的status  也应该更改为默认值 1
  dialogFormVisible.value = true;  // 打开窗口
}

// 点击 编辑 当前角色
const editRoleFn = (row: IRoleModel) => {
  Object.assign(roleEditForm, row);
  dialogFormVisible.value = true;  // 打开窗口
}

// 监听 子组件RoleEdit 的 自定义事件cancel 
const doCancelFn = () => {
  roleEditForm.id = 0;  // 关闭窗口  将当前角色id改为默认值0
  dialogFormVisible.value = false;  // 关闭窗口
}

// 监听 子组件RoleEdit 的 自定义事件confirm
const doConfirmFn = () => {
  roleEditForm.id = 0;  // 关闭窗口  将当前角色id改为默认值0
  dialogFormVisible.value = false;  // 关闭窗口
  // 编辑成功后,再次发送请求  更新数据
  queryList();
}


// 点击 分配菜单
const toAllotMenu = (id: number) => {
  //跳转到分配菜单页面,并且通过query传参将当前角色id传过去
  router.push(`/ums/allocMenu?id=${id}`);
  http.role.getRoleMenuById(id).then(res => {
    console.log('当前角色拥有的使用菜单权限 : ', res);

  })

}

// 点击 分配资源
const toAllotResource = (id: number) => {
  //跳转到分配资源页面,并且通过query传参将当前角色id传过去
  router.push(`/ums/allocResource?id=${id}`);
}



</script>



<style scoped lang="less">
.role-container {

  // 搜索框
  .search-container {
    padding: 20px;
    box-shadow: 0 2px 12px 1px rgba(0, 0, 0, .1);
    border-radius: 4px;
    display: flex;
    flex-direction: column;

    .top {
      display: flex;
      justify-content: space-between;

      .top-left {
        display: flex;
        align-items: center;

        span {
          margin-left: 15px;
        }
      }
    }

    .bottom {
      margin-left: 50px;
      margin-right: 800px;
      display: flex;
      align-items: center;

      .text {
        width: 100px;
      }

    }
  }

  // 添加按钮
  .btn-container {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    margin: 20px 0;
    box-shadow: 0 2px 12px 1px rgba(0, 0, 0, .1);
    border-radius: 4px;

    .left {
      display: flex;
      align-items: center;

      span {
        margin-left: 10px;
      }
    }
  }

  // 分页器
  .pagination-box {
    display: flex;
    flex-direction: row-reverse;
    margin: 20px 0;
  }
}
</style>